<template>
  <!-- 推荐嘉宾模块 -->
  <view class="puttop">
    <text class="text"> 推荐嘉宾 </text>
    <view class="bottom"> </view>
    <view class="cardItem">
      <userItem v-for="item in list" :key="item.id" :data="item" />
    </view>
    <navigator hover-class="none" open-type="switchTab" url="/pages/search/search">
      <view class="more"> 浏览更多嘉宾 > </view>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import userItem from '@/components/seek/UserList/userItem.vue'
import type { UserItem } from '@/types/index/home'
defineProps<{ list: UserItem[] }>()
</script>

<style scoped lang="scss">
.puttop {
  width: 750rpx;
  // height: 4220rpx;
  background-color: rgb(250, 250, 250);
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;

  .cardItem {
    margin-top: 50rpx;
  }

  .text {
    font-weight: 700;
    font-size: 40rpx;
    position: relative;
    top: 15rpx;
    left: 30rpx;
    color: #97979b;
    margin-bottom: 50rpx;
  }

  .more {
    height: 120rpx;
    font-size: 35rpx;
    color: rgba(153, 153, 153);
    text-align: center;
    line-height: 90rpx;
  }

  .bottom {
    width: 49rpx;
    height: 13rpx;
    border-radius: 30rpx;
    background: linear-gradient(to right, #0f84d8, #c7e5fa);
    position: relative;
    top: 30rpx;
    left: 60rpx;
  }
}
</style>
